import React, { Component } from 'react';
import { connect } from 'dva'
import { Card, Button, Input, Upload, Form, Row, Col, Icon, Modal } from 'antd';
import { api } from '../../utils/config';
const { faqPicUploadUrl } = api;
const FormItem = Form.Item;
const { TextArea } = Input;
const styles = {
    order: {
        marginBottom: '20px'
    },
    deleteIcon: {
        cursor: 'pointer',
    },
    addButton: {
        textAlign: 'center',
    }
}

const uploadButton = (
    <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
    </div>
);
class FaqDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            previewVisible: false,
            previewImage: '',
        }
    }

    //改变错误码
    changeErrorCode = (e) => {
        this.props.dispatch({
            type: 'faqDetail/updateData',
            payload: {
                errorCode: e.target.value
            }
        })
    }

    //添加步骤
    addStep = () => {
        this.props.dispatch({ type: 'faqDetail/addAnswer' })
    }

    //移除步骤
    removeStep = (index) => {
        this.props.dispatch({
            type: 'faqDetail/removeAnswer',
            payload: index
        })
    }

    handleCancel = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    //修改文本框内容
    changeDescription = (value, index) => {
        this.props.dispatch({
            type: 'faqDetail/updateText',
            payload: { value, index }
        })
    }

    //修改图片
    changePci = ({ fileList, index,file }) => {
        this.props.dispatch({
            type: 'faqDetail/upload',
            payload: { fileList, index,file }
        })
    }
    //移除图片
    onRemove = (file,index) => {
        this.props.dispatch({
            type: 'faqDetail/upload',
            payload: { file,index }
        })
    }
    //保存
    onSave = () => {
        this.props.form.validateFields((err, values) => {
            if (err) return;
            console.log(values)
            this.props.dispatch({
                type: 'faqDetail/updateData',
                payload: values
            })
            this.props.dispatch({ type: 'faqDetail/save' })
        });
    }

    render() {
        const code = sessionStorage.getItem('code');
        const { previewVisible, previewImage } = this.state;
        const { data } = this.props.faqDetail;
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 },
            },
        };
        return (
            <Card
                title="问题详情"
                extra={<div>{
                    code === '2' ? <Button type="primary" onClick={this.onSave}>保存</Button> : ''
                }
                </div>
                }>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="错误代码"
                    >
                        {getFieldDecorator('errorCode', {
                            initialValue: data.errorCode,
                            rules: [{ required: true, message: '请输入错误代码!' }],
                        })(
                            <Input onChange={this.changeErrorCode} disabled={code === '2' ? false : true}/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="问题"
                    >
                        {getFieldDecorator('question', {
                            initialValue: data.question,
                            rules: [{ required: true, message: '请输入问题!' }],
                        })(
                            <Input disabled={code === '2' ? false : true}/>
                        )}
                    </FormItem>
                </Form>
                <Row>
                    <Col span={4} style={{ textAlign: 'right' }}>解决方案：</Col>
                    <Col span={20}>
                        {
                            data.answer.map((item, index) => {
                                return (
                                    <Row key={item.order} style={styles.order}>
                                        <Col span={1}>
                                            <Icon
                                                style={styles.deleteIcon}
                                                type="delete"
                                                theme="outlined"
                                                onClick={() => { this.removeStep(index) }} />
                                        </Col>
                                        <Col span={2}>{`步骤 ${index + 1}`}</Col>
                                        <Col span={21}>
                                            <Upload
                                                accept="image/*"
                                                // action=''
                                                listType="picture-card"
                                                fileList={item.pictureUrl ? [{
                                                    uid: '-1',
                                                    name: 'xxx.png',
                                                    status: 'done',
                                                    url: item.pictureUrl,
                                                }] : []}
                                                onPreview={this.handlePreview}
                                                onRemove={(file)=>this.onRemove(file,index)}
                                                customRequest={({ file, fileList }) => { this.changePci({ file, fileList, index }) }}
                                            >
                                                {item.pictureUrl ? null : uploadButton}
                                            </Upload>
                                            <TextArea
                                                disabled={code === '2' ? false : true}
                                                autosize={{ minRows: 4, maxRows: 4 }}
                                                defaultValue={item.text}
                                                onChange={(e) => { this.changeDescription(e.target.value, index) }} />
                                        </Col>
                                    </Row>
                                )
                            })
                        }
                        <div style={styles.addButton}>
                            {code === '2' ? 
                                <Button type="primary" onClick={this.addStep}>添加步骤</Button> : ''
                            }
                            
                        </div>
                    </Col>
                </Row>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </Card>
        )
    }
}

export default Form.create()(connect(({ faqDetail }) => ({ faqDetail }))(FaqDetail));
